<template>
	<div class="common-layout">
		<section class="common-layout_tools">
			<div>
				<Breadcrumb></Breadcrumb>
				<a-popover v-model="visible" trigger="click" width="600" placement="bottom">
					<div slot="content">
						555
					</div>
					<a-button type="primary">
						筛选项
					</a-button>
				</a-popover>
			</div>
			<div>
				<a-button type="primary">+ 新增</a-button>
				<a-button icon="download">导出</a-button>
			</div>
		</section>
		<section class="table-box">
			<a-table :columns="columns" :data-source="data">
				<a slot="name" slot-scope="text">{{ text }}</a>
				<span slot="tags" slot-scope="tags">
					<a-tag v-for="tag in tags" :key="tag" :color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'">
						{{ tag.toUpperCase() }}
					</a-tag>
				</span>
				<span slot="action">
					<a-button type="link" size="small">编辑</a-button>
					<a-divider type="vertical" />
					<a-popconfirm title="确认删除该记录?" ok-text="确定" cancel-text="考虑一下" @confirm="() => onDelete(record.key)">
						<a-button type="link" style="color: #ff7875;" size="small">删除</a-button>
					</a-popconfirm>
				</span>
			</a-table>
		</section>
	</div>
</template>

<script>
	import Breadcrumb from "@/components/breadcrumb";
	export default {
		components: {
			Breadcrumb
		},
		data() {
			return {
				visible: false,
				columns: [{
						title: '序号',
						customRender: (text, record, index) => `${index+1}`,
					}, {
						dataIndex: 'name',
						key: 'name',
						title: '姓名'

					},
					{
						title: '年龄',
						dataIndex: 'age',
						key: 'age',
					},
					{
						title: '地址',
						dataIndex: 'address',
						key: 'address',
					},
					{
						title: '标签',
						key: 'tags',
						dataIndex: 'tags',
						scopedSlots: {
							customRender: 'tags'
						},
					},
					{
						title: '操作',
						key: 'action',
						scopedSlots: {
							customRender: 'action'
						},
					},
				],
				data: [{
						key: '1',
						name: 'John Brown',
						age: 32,
						address: 'New York No. 1 Lake Park',
						tags: ['nice', 'developer'],
					},
					{
						key: '2',
						name: 'Jim Green',
						age: 42,
						address: 'London No. 1 Lake Park',
						tags: ['loser'],
					},
					{
						key: '3',
						name: 'Joe Black',
						age: 32,
						address: 'Sidney No. 1 Lake Park',
						tags: ['cool', 'teacher'],
					},
				]
			}
		}
	}
</script>

<style lang="less">
	.common-layout {
		width: 100%;

		>section {
			width: 100%;
			margin-bottom: 5px;
			border: solid .5px #dfdfdf;
		}

		.common-layout_tools {
			height: @tools_height;
			background: #fff;
			padding: 10px 20px;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;

			>div {
				display: flex;
				align-items: center;
			}

			.ant-btn {
				margin: 0 5px;
			}
		}

		.table-box {
			background: #fff;
			padding: 24px 10px;
			box-sizing: border-box;
		}
	}
</style>
